<template>
	<view class="want">
		<view class="top1">
			<view class="left">
				<vvSelectArea :list="areas" placeholder="选择区域" @change="changecity" ref="csSel" type="2">
				</vvSelectArea>
				<view class="closeSel"  @click="closeCity">
					<u-icon name="close-circle" color="#00C777"  v-if="formData.city_id"  size="22"></u-icon>
				</view>
<!-- 				<vvSelect placeholder="选择区域" class="select" :list="categorys" label="name" valueKey="id" ref="vvSelect"
					@change="pickerChange">
				</vvSelect> -->
			</view>
			<view class="right">
				<view @click="choiceDate">
					{{formData.startTime||'选择时间'}}
					<!-- <button @click="choiceDate">选择有效时间</button> -->
				</view>
				<view class="closeSel"  @click="closeStartTime">
					<u-icon name="close-circle" color="#00C777"  v-if="formData.startTime"  size="22"></u-icon>
				</view>
			</view>
			<!-- <view class="btn">
				<u-button class="custom-style" text="重置" customStyle="background-color: #00C777;color:#fff"
					@click="reset" size="small"></u-button>
			</view> -->
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list1.length==0" margin-top='50'></u-empty>
		<view class="list" v-for="item in list1" @click="myDeatils(item)" :key="item.id">
			<view class="main-container">
				<view class="left-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="right-container">
					<view class="top">
						<view class="name">
							<view class="vip">
								求购
							</view>
							<view class="thing">
								{{item.name}}
							</view>
						</view>
						<view class="dolor">
							急需{{item.num}}株
						</view>
					</view>
					<view class="content">
						<view class="content-top">
							<view class="bx" v-if="item.newSpe[0].value">
								{{item.newSpe[0].name}}：<text
									class="blue">{{item.newSpe[0].value}}</text>{{item.newSpe[0].unit}}
							</view>
							<view class="gf" v-if="item.newSpe[1].value">
								{{item.newSpe[1].name}}：<text
									class="blue">{{item.newSpe[1].value}}</text>{{item.newSpe[1].unit}}
							</view>
							
						</view>
						<view class="center">
							<view class="jp" v-if="item.newSpe[3].value">
								<!-- {{item.lvl_name}} -->
								{{item.newSpe[3].name}}：<text
									class="blue">{{item.newSpe[3].value}}</text>{{item.newSpe[3].unit}}
							</view>
							<view class="wz" v-if="item.newSpe[4].value">
								{{item.newSpe[4].name}}：<text
									class="blue">{{item.newSpe[4].value}}</text>{{item.newSpe[4].unit}}
							</view>
							<!-- <view class="empt">
							</view> -->
						</view>
					</view>
					<view class="intro">
						<!-- {{item.introduction}} -->
						<view class="gd" v-if="item.newSpe[2].value">
							{{item.newSpe[2].name}}：<text
								class="blue">{{item.newSpe[2].value}}</text>{{item.newSpe[2].unit}}
						</view>
					</view>
				</view>
			</view>
			<view class="list-bottom">
				<view class="liulan">
					<!-- {{item.address}} -->
					{{item.create_time.substring(0,item.create_time.length-3)}}
				</view>
				<view class="th">
					<!-- {{item.create_time.substring(0,item.create_time.length-3)}} -->
				</view>
				<view class="mq" @click.stop="goDetails(item)">
					⊕我有货
				</view>
			</view>

		</view>
		<view class="noMore" v-if="last_page==formData.page&&list1.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;">
			数据加载完成...
		</view>
		<u-datetime-picker :show="show" mode="date" @confirm="confirm" ref="datetimePicker" @cancel='show=false'
			:formatter="formatter">选择有效时间</u-datetime-picker>
	</view>
</template>

<script>
	// import vvSelect from '@/components/vv-select/vv-select.vue'
	import vvSelectArea from '@/components/vv-select-area/vv-select-area'
	import {
		cityList,
		wantBuyList
	} from '@/request/api.js'
	export default {
		components: {
			vvSelectArea,
			// vvSelect
		},
		onShareAppMessage() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',
		
			}
		},
		onShareTimeline: function() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',
			}
		},
		data() {
			return {
				show: false,
				categorys: [],
				areas: [],
				formData: {
					startTime: '',
					endTime: '',
					province_id: '',
					city_id: '',
					county_id: '',
					page: 1
				},
				curNow: 0,
				keyword: '',
				list1: [],
				last_page: 1,
				minDate: '1669605699632'
			}
		},
		onLoad() {
			this.getCity()
			this.wantBuyList()
			const t1 = new Date().valueOf() // 第一种，推荐
			const t2 = new Date().getTime() // 第二种，推荐
			this.minDate = t1
			console.log(t1, t2)
		},
		onReachBottom() {
			// this.$refs.community.reachBottom()
			// console.log('到达底部')
			// console.log(this.form.page,this.last_page)
			if (this.formData.page < this.last_page) {
				this.formData.page = this.formData.page + 1
				this.wantBuyList()
			}
		},
		onPullDownRefresh() {
			this.reset()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			reset(){
				this.formData.page = 1
				this.list1 = []
				this.$refs.csSel.emptCheckLabels()
				// this.$refs.vvSelect.emptCheckLabels()
				this.formData.city_id = ''
				this.formData.startTime = ''
				this.formData.county_id = ''
				this.formData.province_id = ''
				this.formData.endTime = ''
				this.wantBuyList()
			},
			closeStartTime(){
				this.formData.page = 1
				this.list1 = []
				this.formData.startTime = ''
				this.formData.endTime = ''
				this.wantBuyList()
			},
			closeCity(){
				this.formData.page = 1
				this.list1 = []
				this.$refs.csSel.emptCheckLabels()
				this.formData.city_id = ''
				this.formData.county_id = ''
				this.formData.province_id = ''
				this.wantBuyList()
			},
			wantBuyList() {
				let form = {
					startTime: this.formData.startTime !== '' ? `${this.formData.startTime} 00:00:00` : '',
					endTime: this.formData.startTime !== '' ? `${this.formData.startTime} 23:59:59` : '',
					province_id: this.formData.province_id,
					city_id: this.formData.city_id,
					county_id: this.formData.county_id,
					page: this.formData.page
				}
				// console.log(form)
				wantBuyList(form).then(res => {
					if (res.msg == "请求成功") {
						// console.log(res)
						this.list1 = this.list1.concat(res.data.list)
						this.list1.map(item=>{
							let arr = []
							item.specs_config.forEach(el=>{
								if(el.value!=''){
									arr.push(el)
								}
							})
							item['newSpe']=arr
						})
						// console.log(res.data.total)
						this.last_page = Math.ceil(res.data.total / 10)
					}
				})
			},
			myDeatils(item) {
				uni.navigateTo({
					url: '/components/listDetail/Detail?type=2&data=' + JSON.stringify(item)
				})
			},
			goDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/want/uploadWant?data=' + item.id
				})
			},
			getCity() {
				cityList().then(res => {
					// console.log(res)
					let data = res.data
					let arr = []
					// data.map(item => {
					// 	if (item.childs) {
					// 		arr.push(item.childs)
					// 		// item.childs.map(el => {
					// 		// 	el.childs.map(els => {
					// 		// 		els = []
					// 		// 	})
					// 		// })
					// 	}
					// })
					// this.categorys = res.data
					// console.log(arr)
					this.areas = res.data
				})
			},
			pickerChange(val){
				console.log(val)
				this.formData.city_id = val
				this.formData.page = 1
				this.list1 = []
				this.wantBuyList()
			},
			changecity(val, label) {
				// console.log(val)
				// console.log(val)
				this.formData.province_id = val[0]
				this.formData.city_id = val[1]
				this.formData.county_id = val[2]
				this.formData.page = 1
				this.list1 = []
				this.wantBuyList()
			},
			choiceDate() {
				this.show = true
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let date = timeFormat(e.value)
				this.formData.startTime = date
				this.formData.page = 1
				this.list1 = []
				this.wantBuyList()
				this.show = false
			},
		}
	}
</script>
<style>
	/* @page{
		background-color: #E2E2E2;
	} */
	page {
		background-color: #f6f6f6;
		min-height: 100vh;
	}
</style>
<style lang="scss" scoped>
	.blue {
		color: #00C777
	}

	.want {
		font-size: 26rpx;

		.top1 {
			background-color: #fff;
			height: 50px;
			line-height: 50px;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.closeSel{
				margin-left: 10rpx;
			}
			.left {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.right {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn{
				width: 20%;
			}

		}

		padding: 0 15rpx;

		.list {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 15rpx;
			box-shadow: 2px 3px 7px #807e7e4f;
			border-radius: 13rpx;

			.main-container {
				height: 173rpx;
				display: flex;
				padding: 0 20rpx;
				background: #fff;
				font-size: 22rpx;
				padding: 12rpx 0;
				border-bottom: 1px solid #E2E2E2;
				margin: 15rpx;

				.left-img {
					width: 160rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.right-container {
					flex: 1;
					font-size: 22rpx;
					width: 100%;

					.top {
						display: flex;
						border-bottom: 1px solid #E2E2E2;
						justify-content: center;
						align-items: center;
						margin: 0rpx 15px;
						padding: 0rpx 0 15rpx 0;
						.name {
							flex: 1;
							color: #00C777;
							display: flex;

							.vip {
								background: #00C777;
								color: #fff;
								border-radius: 25rpx;
								padding: 0 15rpx;
								margin-right: 15rpx;
							}
						}

						.dolor {
							color: #FD4343;
						}
					}

					.content {
						display: flex;
						flex-direction: column;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.content-top {
							display: flex;
							margin: 15rpx 0px;

							.bx,
							.gf,
							.gd {
								width: 50%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
							}
						}

						.center {
							display: flex;

							.jp,
							.wz,
							.empt {
								width: 50%;
							}

							.jp {
								// color: #00C777;
							}

							.wz {
								// color: #FFAB68;
							}

						}

						.intro {
							// color: #C9C9C9;
						}
					}

					.intro {
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;
						// color: #C9C9C9;
						width: 220px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}

			.list-bottom {
				margin: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #4F4F4F;
				font-size: 26rpx;

				.mq {
					color: #fff;
					background-color: #00C777;
					padding: 8rpx 18rpx;
					border-radius: 26rpx;
				}

				.liulan {
					width: 35%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}
			}
		}

		font-size: 14px;

		.tab-top {

			padding: 40rpx 15px;
			background: #fff;
		}

		.search {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			background: #fff;
			padding: 40rpx 0;

			.dw {
				width: 170rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #00C777;

				.city {
					margin-left: 10rpx;
				}

				image {
					height: 15px;
					width: 10px;
				}
			}

			.search-input {
				flex: 1;
			}

		}

	}
</style>
